<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <button>页面a</button>
    <button>页面b</button>
    <div class="page"></div>
    <script>
      var pageEle = document.querySelector(".page");
      var btn1 = document.querySelectorAll("button")[0];
      var btn2 = document.querySelectorAll("button")[1];
      //1.出发点击事件 先对应页面赋hash值 再执行函数 2.函数中是一个选择事件  选择对应hash值的页面
      //页面在一开始就全部加载 后面减少加载
      btn1.onclick = function () {
        window.location.hash = "1";
        hashPage();
      };
      btn2.onclick = function () {
        window.location.hash = "2";
        hashPage();
      };

      function hashPage() {
        var str;
        switch (window.location.hash) {
          case "1":
            str = "<h1>我是界面a</h1>";
            pageEle.innerHTML = str;
          case "2":
            str = "<h1>我是界面b</h1>";
            pageEle.innerHTML = str;
        }
      }
    </script>
  </body>
</html>
